<template>
  <view class="home">
    <view class="home-search-warp">
      <search-input></search-input>
    </view>
    <view class="swiper-warp">
      <u-swiper :list="swiperList" @clickSwiperItem="clickSwiperItem">
      </u-swiper>
    </view>
    <view class="menu-list-warp flex-b">
      <image :src="item.image_src" class="menu-item" v-for="item in menuList"
        :key="item.name"></image>
    </view>
    <view class="floor_warp">
      <view class="floor_item" v-for="(item, index) in floorList" :key="index">
        <view class="floor_warp_img">
          <image :src="item.floor_title.image_src"></image>
        </view>
        <view class="item_img_warp">
          <view class="navigator" @click="clickProductList(img.navigator_url)"
            v-for="img in item.product_list" :key="img.image_src">
            <image :src="img.image_src"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList: [],
        menuList: [],
        floorList: []
      };
    },
    created() {
      this.getSwiperList();
      this.getMenuList();
      this.getFloorList();
    },
    methods: {
      clickProductList(url) {
        url = url.replace(/goods_list/g,
          'goods_list/goods_list')
        uni.navigateTo({
          url
        })
      },
      clickSwiperItem(item) {
        item.navigator_url = item.navigator_url.replace(/main/g,
          'goods_detail')
        uni.navigateTo({
          url: item.navigator_url
        })
      },
      getFloorList() {
        this.$http({
          url: '/home/floordata',
          method: 'GET',
          data: {}
        }).then(res => {
          console.log(res);
          this.floorList = res;
        });
      },
      getMenuList() {
        this.$http({
          url: '/home/catitems',
          method: 'GET',
          data: {}
        }).then(res => {
          this.menuList = res;
        });
      },
      getSwiperList() {
        this.$http({
          url: '/home/swiperdata',
          method: 'GET',
          data: {}
        }).then(res => {
          this.swiperList = res;
        });
      }
    }
  };
</script>

<style lang="scss">
  .home {
    width: 100vw;
    height: 100vh;

    .home-search-warp {
      width: 100%;
      height: 90upx;
    }

    .swiper-warp {
      width: 100%;
      height: 340upx;
    }

    .menu-list-warp {
      width: 100%;
      height: 208upx;
      padding: 30upx 30upx;

      .menu-item {
        width: 150upx;
        height: 160upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .floor_warp {
      width: 100%;
      /* #ifdef H5 */
      padding-bottom: 100upx;

      /* #endif */
      .floor_item {
        width: 100%;
        height: 495upx;

        .item_img_warp {
          width: 100%;
          overflow: hidden;

          .navigator {
            float: left;
            width: 240upx;
            height: 200upx;

            &:first-child {
              width: 240upx;
              height: 415upx;
            }

            &:nth-child(2),
            &:nth-child(3) {
              margin-bottom: 15upx;
            }

            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(4) {
              margin-right: 15upx;
            }
          }
        }

        .floor_warp_img {
          width: 100%;
          height: 60upx;
          margin: 20upx 0;
        }
      }
    }
  }
</style>
